<template>
  <div class="xiazhu_boby">
    <div class="dingbu_xiazhu">
      <div class="display_sw">
        <div class="home_left">
          <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
          <span @click="touzhu2" :class="{bottom_border2:isbottom2}">投注记录</span>
        </div>
        <p class="home_you_fz">余额：{{user_info.wallet}}</p>
      </div>
    </div>
    <gameInfo :date="false"></gameInfo>
    <!--内容-->
    <div v-if="qiehuan1">
      <div class="counter_box">
        <button @click="handlerClear">清空选号</button>
        <button @click="$router.back()">继续下注</button>
      </div>
      <div class="home_count" v-if="queren">
        <ul class="xuanhao_ul xuanhao_ul_border">
          <li class="xuanhao_li xuanhao_li2" v-for="(item, index) in credit_cart" :key="index">
            	<p >{{item.parentName}}:{{item.name}}</p>
            	<span class="span_width">
              赔率：
              <b class="color_red">{{item.odds}}</b>
            </span>
            <input
              type="number"
              class="xuanhao_input"
              placeholder="请输入金额"
              @input="changeInput($event,index)"
              :value="item.amount"
            />
            <button class="xuanhao_quxiao" @click="handlerDelete(index)">取消</button>
          </li>
        </ul>
        <button class="xuanhao_btn" @click="handlerConfirm" v-if="credit_cart.length">确认金额</button>
      </div>
      <!--确认金额-->
      <div class="querenjin" v-else>
        <ul class="shaixuanhao_ul">
          <li class="shaixuanhao_li" v-for="(item,index) in credit_cart" :key="index">
            <div class="shaixuanhao_li_left shaixuanhao_li_left2">
              <span class="aaa">{{item.parentName}}</span>
              <span>
                赔率：
                <b class="color_red">{{item.odds}}</b>
              </span>
              <span>
                金额：
                <b class="color_red">{{item.amount}}</b> 元
              </span>
            </div>
            <i class="shaixuanhao_deal" @click="handlerDelete(index)">
              <img src="../../assets/images/caipiao/shanchu.png" alt />
            </i>
          </li>
        </ul>
        <button class="shaixuanhao_fanhui_btn" @click="queren = true" v-if="credit_cart.length">返回</button>
      </div>

      <!--子组件底部-->
      <div class="home_footer">
        <div class="display_strad">
          <div class="footer_div1 xuanhao_div1" style="width: 80%">
            <div class="footer_div1_div zhenghe_footer">
              <div class="zhegnhe_left">
                <p>
                  共
                  <b class="color_red">{{totalNumber}}</b> 注
                </p>
                <p>
                  共
                  <b class="color_red">{{totalPrice}}</b> 元
                </p>
              </div>
            </div>
          </div>
          <button class="footer_xiazhu" @click="handlerSubmit">立即下注</button>
        </div>
      </div>
    <!--下注弹出密码框-->
      <!--<van-dialog
        v-model="isShowPasswordDialog"
        title="温馨提示"
        show-cancel-button
        @cancel="passwordDialogClose"
        @confirm="passwordDialogConfirm"
      >
        <div class="jiaoyi_div">
          <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
          <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
        </div>
      </van-dialog>-->

      <van-dialog v-model="isShowPasswordDialog" message="请确定下注" show-cancel-button @cancel="passwordDialogClose" @confirm="passwordDialogConfirm">
				</van-dialog>
    </div>
    <!--这是五星复式的    投注记录组件的内容-->
    <div class="touzhu_zujian" v-else>
      <touzhujilu></touzhujilu>
    </div>
  </div>
</template>

<script>
import gameInfo from "../AComp/gameInfo";
import touzhujilu from "../wuxingwanfa/components/touzhujilu";
import { mapState } from "vuex";
import _isEmpty from "lodash/isEmpty";
import { creditNumberBasket } from "../../service/api";
export default {
  components: {
    touzhujilu,
    gameInfo
  },
  data() {
    return {
      queren: true,
      qiehuan1: true, //我要投注跟投注记录切换显示
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class

      isShowPasswordDialog: false,
      deal_pwd: ""
    };
  },
  created() {
    if (this.checkNull) {
      this.queren = false;
    } else {
      this.queren = true;
    }
  },
  computed: {
    checkNull() {
      if (_isEmpty(this.credit_cart)) {
        return false;
      }
      return this.credit_cart.every(item => {
        return item.amount !== null;
      });
    },
    totalNumber() {
      if (_isEmpty(this.credit_cart)) {
        return 0;
      }
      return this.credit_cart.length;
    },
    totalPrice() {
      if (_isEmpty(this.credit_cart)) {
        return 0;
      }
      return this.credit_cart.reduce(
        (total, item) => {
          let val = 0
          if(item.amount){
            val = parseInt(item.amount)
          }
          return total + val
        },
        0
      );
    },
    ...mapState(["user_info", "credit_cart"])
  },
  methods: {
    handlerSubmit() {
      if(!this.$store.state.is_bet){
        this.$toast('开奖前一分钟禁止下注');
        return;
      }
      if (!this.checkNull) {
        this.$toast("请输入有效金额");
        return;
      }
      this.isShowPasswordDialog = true;
    },
    // 提交
    passwordDialogConfirm() {
      let { deal_pwd, credit_cart } = this;
//    if (!deal_pwd) {
//      this.$toast("交易密码不能为空");
//      return;
//    }
      let params = {
        deal_pwd,
        orderlist: JSON.stringify(credit_cart)
      };
      creditNumberBasket(params).then(res => {
        this.handlerClear();
        this.queren = true;
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch('asyncGetUserInfo');
          this.passwordDialogClose();
          this.handlerClear();
        }
      });
    },
    changeInput(ev, idx) {
      clearTimeout(this.inputAmount);
      this.inputAmount = setTimeout(() => {
        let arr = this.credit_cart;
        arr.forEach((item, index) => {
          if (index === idx) {
            item.amount = ev.target.value;
          }
        });
        this.$store.commit("replace_credit_cart", arr);
      }, 300);
    },
    // 删除
    handlerDelete(idx) {
      let arr = this.credit_cart;
      let newArr = arr.filter((item, index) => index !== idx);
      this.$store.commit("replace_credit_cart", newArr);
    },
    // 确定
    handlerConfirm() {
      if (this.checkNull) {
        this.queren = false;
      } else {
        this.$toast("请输入有效金额");
      }
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = "";
    },
    // 清空选号
    handlerClear() {
      this.$store.commit("replace_credit_cart", []);
    },
    touzhu1() {
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    touzhu2() {
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    }
  }
};
</script>

<style scoped="scoped">
@import url("../../assets/css/ttcp/xuanhao.css");
.xuanhao_ul_border{margin-bottom: 0.3rem;}
.xuanhao_ul_border .xuanhao_li{margin-bottom: 1px;}
.xuanhao_btn{margin-bottom: 2.44rem;}
.xuanhao_ul .xuanhao_li2 p:first-child{width: 1.5rem;margin-right: 0.15rem; white-space:normal; word-break:break-all;/*height: 0.6rem;line-height: 0.6rem;*/ padding-top: 0.15rem;}
.xuanhao_ul .xuanhao_li {display: flex;justify-content: flex-start;}
.span_width{height: 0.6rem;line-height: 0.6rem;}
.jiaoyi_div{text-align: center;}
.jiaoyi_input{height: 0.64rem;border: 1px solid #f2f2f2;margin:0.5rem auto;}
.shaixuanhao_ul .shaixuanhao_li{margin-bottom: 1px;}
.shaixuanhao_li_left2 {width: 80%;}
</style>
